<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="coach_order_body">
      <!-- 订单状态 -->
      <div class="coach_order_status_box">
        <div class="coach_order_status_left">
          <img
            class="coach_order_status_icon"
            src="../../assets/image/success_icon03.png"
            v-if="orderData.order_status == 1"
          />
          <img
            class="coach_order_status_icon"
            src="../../assets/image/success_icon02.png"
            v-if="orderData.order_status == 2"
          />
          <div
            class="coach_order_status_value_o"
            v-if="orderData.order_status == 1"
          >
            待支付
          </div>
          <div
            class="coach_order_status_value_g"
            v-if="orderData.order_status == 2"
          >
            报名付款成功
          </div>
          <div
            class="coach_order_status_value_o"
            v-if="orderData.order_status == 6"
          >
            已退款
          </div>
          <div
            class="coach_order_status_value_o"
            v-if="orderData.order_status == 7"
          >
            退款中
          </div>
        </div>
        <div
          class="coach_order_status_countdown"
          v-if="orderData.order_status == 1"
        >
          名额锁定中：{{ countdownText }}
        </div>
      </div>
      <!-- 培训信息 -->
      <div class="coach_order_card">
        <div class="coach_order_top_item">
          <!-- <img
            class="coach_order_top_img"
            :src="baseAPIUrl + orderData.image_path"
            alt="封面"
          /> -->
          <img
            class="coach_order_top_img"
            src="../../assets/image/coach_enroll_logo01.png"
            alt="封面"
          />
          <div class="coach_order_top_title">{{ orderData.title }}</div>
        </div>
        <div class="coach_order_top_item">
          <div class="coach_order_top_time_box">
            <img
              class="coach_order_top_icon"
              src="../../assets/image/time_icon01.png"
            />
            <div class="coach_order_top_time">
              {{ orderData.date_text }}
            </div>
          </div>
          <div class="coach_order_top_price">￥ {{ orderData.money }}</div>
        </div>
        <div class="coach_order_top_item_left">
          <img
            class="coach_order_top_icon"
            src="../../assets/image/address_icon01.png"
            style="height: auto"
          />
          <div class="coach_order_top_address_box">
            <div class="coach_order_top_address_detail">
              {{ orderData.address }}
            </div>
          </div>
        </div>
      </div>
      <!-- 报名信息 -->
      <div class="coach_order_card content_card">
        <div class="coach_order_tab_box">
          <div class="coach_order_tab">报名信息</div>
        </div>
        <div class="coach_order_tab_content_user">
          <div class="coach_order_tab_content_left">
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">姓名：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.name }}
              </div>
            </div>
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">国籍：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.country }}
              </div>
            </div>
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">性别：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.sex }}
              </div>
            </div>
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">省：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.province }}
              </div>
            </div>
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">市：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.city }}
              </div>
            </div>
            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">区：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.region }}
              </div>
            </div>

            <div class="coach_order_tab_content_item">
              <div class="coach_order_tab_content_item_title">政治面貌：</div>
              <div class="coach_order_tab_content_item_value user_value">
                {{ orderData.political_status }}
              </div>
            </div>
          </div>
          <img
            class="coach_order_tab_content_user_img"
            :src="orderData.photo"
          />
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="coach_order_card content_card" style="margin-bottom: 0">
        <div class="coach_order_tab_content_item" style="margin-top: 0.24rem">
          <div class="coach_order_tab_content_item_title">报名时间：</div>
          <div class="coach_order_tab_content_item_value">
            {{ orderData.order_time }}
          </div>
        </div>
      </div>
      <!-- 操作栏 -->
      <div class="coach_order_bottom" v-if="orderData.order_status == 1">
        <div class="coach_order_bottom_left">
          <div class="coach_order_bottom_price_label">总金额：</div>
          <div class="coach_order_bottom_price">
            ￥{{ orderData.total_money }}
          </div>
        </div>
        <div class="coach_order_bottom_right">
          <div
            class="coach_order_bottom_btn_g"
            style="margin-right: 0.06rem"
            @click="cancelBtnFn()"
          >
            取消报名
          </div>
          <div class="coach_order_bottom_btn_o" @click="payBtnFn()">
            立即支付
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/order/coachEnrollOrderDetail.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { MessageBox, Indicator, Toast } from "mint-ui";

export default {
  name: "CoachEnrollOrderDetail",
  components: {
    HomeTop,
  },
  data() {
    return {
      topTitle: "订单详情", // 顶部组件参数设置
      orderId: "", // 订单Id
      orderData: {
        order_id: "",
        image_path: "",
        title: "",
        date_text: "",
        money: "",
        address: "",
        name: "",
        country: "",
        sex: "",
        province: "",
        city: "",
        region: "",
        political_status: "",
        order_status: "",
        order_time: "",
        total_money: "",
        remain_time: "",
      }, // 订单详细数据
      countdownText: "0分0秒", // 支付倒计时显示文本
      orderInterval: null,
      baseAPIUrl: this.$store.state.baseAPIUrl,
    };
  },
  created: function () {
    let query = this.$route.query;
    if (query.orderId != undefined && query.orderId != "") {
      this.orderId = query.orderId;
    }

    this.getDetailDataFn();
  },
  methods: {
    // 设置订单剩余时间
    setOrderTimeFn: function () {
      let that = this;
      this.orderInterval = setInterval(function () {
        let time = that.orderData.remain_time;
        if (time >= 0) {
          let minute = 0;
          if (time >= 60) {
            minute = parseInt(time / 60);
            time = parseInt(time % 60);
          }
          that.countdownText = minute + "分" + time + "秒";
          that.orderData.remain_time = that.orderData.remain_time - 1;
        } else {
          that.singelOrderOverdueDealFn();
          clearInterval(that.orderInterval);
        }
      }, 1000);
    },
    // 订单超时处理
    singelOrderOverdueDealFn: function () {
      let that = this;
      let url = "/mobile/cancelCoachEnrollOrderByExpire";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            Toast({
              message: "超出支付时间",
              duration: 3000,
            });
            that.$router.replace({
              name: "CoachHome",
            });
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询订单详情数据
    getDetailDataFn: function () {
      let that = this;
      let url = "/mobile/enrollOrderDetail";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.orderData = response.info;
            if (response.info.order_status == 1) {
              that.setOrderTimeFn();
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 支付按钮
    payBtnFn: function () {
      let that = this;
      let url = "/wechatpay/createOrderJs";
      let data = {
        order_id: this.orderId,
        type: 3,
      };
      Indicator.open("请稍等...");
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.payFn(response);
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 调起支付
    payFn: function (data) {
      let that = this;
      let payData = data;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            that.onBridgeReady(payData),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            that.onBridgeReady(payData)
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            that.onBridgeReady(payData)
          );
        }
      } else {
        this.onBridgeReady(payData);
      }
    },
    // 微信支付
    onBridgeReady: function (payData) {
      let that = this;
      window.WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: payData.appId, //公众号ID，由商户传入
          timeStamp: payData.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: payData.nonceStr, //随机串
          package: payData.package,
          signType: payData.signType, //微信签名方式：
          paySign: payData.paySign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.toSuccessFn();
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            that.cancelPay();
          }
        }
      );
    },
    // 取消订单
    cancelBtnFn: function () {
      let that = this;
      let url = "/mobile/cancelCoachEnrollOrder";
      let data = {
        order_id: this.orderId,
      };
      MessageBox({
        message: "确认取消报名?",
        confirmButtonText: "确认",
        showCancelButton: true,
      }).then((action) => {
        if (action == "confirm") {
          that.axios
            .post(url, data)
            .then((response) => {
              if (response.code == 0) {
                Toast({
                  message: "已取消报名",
                  duration: 3000,
                });
                that.$router.replace({
                  name: "CoachHome",
                });
              } else {
                Toast({
                  message: response.msg,
                  duration: 3000,
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      });
    },
    // 跳转至订单完成提示页
    toSuccessFn: function () {
      let that = this;
      this.$router.replace({
        name: "OrderSuccess",
        query: {
          orderId: that.orderId,
          source: "coachPay",
        },
      });
    },
    // 用户取消支付
    cancelPay: function () {
      let url = "/wechatpay/cancelOrderPay";
      let data = {
        order_id: this.orderId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code != 0) {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  beforeDestroy: function () {
    clearInterval(this.orderInterval);
  },
};
</script>
